<template>
    <div ref="refLibSearchPictureList">
        <result-filter-component :filter="resultView.filter" @set:filter="$emit('set:filter', $event)" />
        <div id="search-picture-result-box" :style="`height: ${mainHeight}px;`">
            <template v-for="(item, index) in resultView.page" :key="index">
                <div class="search-picture-result-img-box" @click="$emit('open:meta', item.source.id)">
                    <el-image class="search-picture-result-img-hover" fit="cover" :src="computeCoverPath(item.cover)" />
                    <span class="search-picture-result-title-hover">
                        {{ item.source.title }}
                    </span>
                    <!-- <span class="search-picture-result-title-hover" v-html="item.title" /> -->
                </div>
            </template>
        </div>
    </div>
</template>

<script>
import { ListView } from '@/views/index.js'
import ResultFilterComponent from '@/components/ResultFilterComponent/ResultFilterComponent.vue'
export default {
    props: {
        resultView: {
            type: ListView,
            default: ListView.defaultView
        },
    },
    components: {
        ResultFilterComponent
    },
    beforeCreate() {/* */ },
    beforeMount() {
        this.$nextTick(() => {
            const refSearchHeader = this.$refs.refLibSearchPictureList.parentElement.parentElement.parentElement.children[0]
            const refSearchTab = this.$refs.refLibSearchPictureList.parentElement.children[0]
            const filter = this.$refs.refLibSearchPictureList.firstElementChild
            this.mainHeight = document.body.clientHeight
                - refSearchHeader.clientHeight
                - refSearchTab.clientHeight
                - filter.clientHeight
                - 24
            window.addEventListener('resize', () => {
                this.mainHeight = document.body.clientHeight
                    - refSearchHeader.clientHeight
                    - refSearchTab.clientHeight
                    - filter.clientHeight
                    - 24
            })
        })
    },
    methods: {
        computeCoverPath(coverEntity) {
            return coverEntity ? coverEntity.dir + '\\' + coverEntity.name + coverEntity.ext : ''
        }
    },
    computed: {},
    data() {
        return {
            mainHeight: 0,
        }
    }
}
</script>

<style>
#search-picture-result-box {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: flex-start;
    background-color: #1E1E1E;
    overflow-y: auto;
}

.search-picture-result-img-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5px 5px 0px 5px !important;
}

.search-picture-result-img-box .el-image {
    width: 160px !important;
    height: 170px !important;
    cursor: pointer;
    border-radius: 4px;
}

.search-picture-result-img-hover:hover {
    box-shadow: 0px 0px 4px 0.5px #DCDCAA;
}

.search-picture-result-img-box span {
    cursor: pointer;
    height: 23px;
}

.search-picture-result-title-hover:hover {
    color: #DCDCAA;
}

#search-picture-filter-bar {
    padding-left: 14px;
    height: 21px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: auto;
    background-color: #1E1E1E;
    position: relative;
    box-shadow: 0 2px 7px -3px black;
}

/* .el-dropdown-link {
    font-size: 8px;
    cursor: pointer;
    white-space: nowrap;
    color: #A9A9A9;
} */

.link-font:hover {
    color: #E0E0E0;
}

#search-picture-filter-bar::-webkit-scrollbar {
    height: 30px !important;
}

#search-picture-filter-bar::-webkit-scrollbar-thumb {
    border-radius: 2.5px;
    background: #BFBFBF !important;
}

#search-picture-filter-bar::-webkit-scrollbar-track {
    background: #EFEFEF !important;
    border-radius: 2.5px;
}
</style>